<template>
    <view class="headPages" >
        <view :style="'height:'+StatusBar" v-if="hasEmptBar"></view>
        <view class="empt" :style="'height:'+barHeight" v-if="mode != 'back' "> </view>

        <view class="fix-head" :style="'height:'+barHeight+';background:'+mainColor" :class="[styleClass]">
            <view :style="'height:'+StatusBar"></view>
            <view :style="'height:'+contentHeight+';line-height:'+contentHeight" class="head-content" >
                <!-- <view class="back" @click.stop="goBack" v-if="hasBack">
                    <text class="iconfont icon-xiangzuo" ></text>
                </view>
                <view class="r-box">
                    <slot></slot>
                </view> -->

                <slot></slot>
            </view>
        </view>
          
    </view>
</template>

<script>

const app = getApp();
export default {
    props:{
        headHeight:String,
        mainColor:{
            type:String,
            default:'#fff'
        },
        mode:{
            type:String,
            default:''
        },
        hasEmptBar:Boolean,
        hasBack:{
            type:Boolean,
            default:true
        },
        styleClass:{
            type:String,
            default:''
        }
    }, 
    components: { },
    data () {
        return {
            StatusBar:'44px',//最顶部的手机自带状态栏 如电量 时间等
            barHeight: '86px', //整个头部高度 默认60px
            contentHeight:'42px',
            contentWidth:'300px'
        }
    },
    mounted () {
        this.initFunc()
    },
    methods: {
    
        initFunc(){

            let systemInfo = uni.getSystemInfoSync();
            let custom = wx.getMenuButtonBoundingClientRect();

            // console.log('systemInfo',systemInfo)
            // console.log('custom',custom)

            var statusBarHeight = systemInfo.statusBarHeight  
            // let CustomBar = custom.bottom + custom.top - systemInfo.statusBarHeight;
            let CustomBar =  custom.top + custom.height + 6 ;

            this.barHeight = CustomBar +'px'
            this.StatusBar = statusBarHeight +'px'
            this.contentHeight = (CustomBar - statusBarHeight)  + 'px'
            this.contentWidth = (custom.left-20) +'px'

            // console.log('999999999', CustomBar )
		

            this.$emit('update:headHeight', CustomBar)
        },
        goBack(){

            let pages = getCurrentPages()

            //  console.log('aksjhakjsdh a卡萨丁和卡视角和',pages)

            if(pages.length == 1){

                this.$goNext( '/pages/index/index' ,'reLaunch')
            }
            else{
                uni.navigateBack()
            }
            
        }

    }
}
</script>

<style scoped lang="scss">
.headPages{
  
    width: 100%;
    .fix-head{
        position: fixed;
        width: 100%;
        left: 0;
        top: 0;
        color: #000;
        z-index: 40;
    }
    .head-content{
        padding-left: 30rpx;
        padding-bottom: 10rpx;
        display: flex;
        .back{
            width: 26px;
            height: 100%;
            .iconfont{
                font-size: 44rpx; 
            }
           
        }
        .r-box{
            flex: 1;
            max-width: 100%;
        }
    }
   
}
</style>
